<template>
  <n-modal v-model:show="isVisible" title="添加出款单" preset="dialog" @close="onClose" @update:show="onClose" style="height: 400px;width: 700px">
    <n-form @submit.prevent="handleSubmit" label-width="120px" class="form-container">
      <div class="form-row" style="margin-top: 20px">
        <n-form-item label="订单编号  ：" path="name">
          <n-input v-model:value="form.orderId" placeholder="请输入订单编号"/>
        </n-form-item>
        <n-form-item style="margin-left: 10px" label="订单类型">
          <n-select
              v-model:value="form.orderType"
              :options="typeOptions"
              style="width: 180px;"
          ></n-select>
        </n-form-item>
        <n-form-item style="margin-left: 10px" label="金额">
          <n-input v-model:value="form.price"
                   placeholder="请输入金额"></n-input>
        </n-form-item>
      </div>

      <div class="form-row">
        <n-form-item label="负责人">
          <n-select v-model:value="form.adminId"
                    :options="admins"
                    style="width: 180px"></n-select>
        </n-form-item>
        <n-form-item style="margin-left: 10px" label="完成时间：" path="name">
          <n-date-picker
              v-model:formatted-value="time"
              placeholder="请选择完成时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"/>
        </n-form-item>
      </div>

      <!-- 提交按钮 -->
      <div class="submit-row">
        <n-form-item>
          <n-button type="primary" native-type="submit" @click="handleSubmit">提交</n-button>
        </n-form-item>
      </div>
    </n-form>
  </n-modal>
</template>

<script setup>
  import {onMounted, ref, watch} from 'vue';
  import {useUserStore} from "@/store/index.js";
  import api from '@/api/admin'
  import {List} from "echarts";

  const loading = ref(true)
  const userStore = useUserStore()
  const id = userStore.getId();
  const option = ref([
  ])
  const typeOptions = [
    {
      label: "客户订单",
      value: "customer_order",
    },
    {
      label: "采购订单",
      value: "purchase_order"
    },
    {
      label: "物流订单",
      value: "provider_logistics_order"
    }
  ]
  const time = ref(null)
  const admins=ref([])
  const emit = defineEmits(['updatePage'])
  const props = defineProps({
    show: {
      type: Boolean,
      required: true,
    },
    onClose: {
      type: Function,
      required: true,
    },
    option: {
      type: List,
      require: true
    }
  });

  const isVisible = ref(props.show);
  watch(() => props.show, (newVal) => {
    isVisible.value = newVal;
  });

  const form = ref({
    orderId:'',
    orderType:'',
    price:'',
    adminId:'',
    endTime:''
  });
  const queryAdminList = async () => {
    loading.value = true
    try {
      const res = await api.findAdminByRole({
        role: 'FINANCEADMIN'
      })
      if(res.code === 200) {
        res.data.map((item)=>{
          admins.value.push({
            label: item.name,
            value: item.id
          })
        })
      }
      else {
        $message.error(res.message)
      }
    } catch (err) {
      $message.error("获取管理员信息失败！")
    }finally{
      loading.value = false
    }
  }
  const handleSubmit = async () => {
    const endTime=time.value.toString()
    console.log(endTime)
    try {
      const res = await api.addFinanceReceipt(
        {
          ...form.value,
          type:'out',
          endTime:endTime,
        }
      )
      if(res.code === 200) {
        emit("updatePage")
      }
      else {
        $message.error(res.message)
      }
    } catch (err) {
      $message.error("添加产品失败！")
    }finally{
      clear()
      props.onClose();
    }
  };
  const clear = () => {
    form.value.orderId='',
      form.value.adminId='',
      form.value.price='',
      form.value.orderType='',
      time.value=null

  }
  onMounted(()=>{
    queryAdminList()
  })
</script>
<style scoped>
    .form-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: relative;
    }

    .form-row {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .form-row > n-form-item {
        flex: 1;
    }

    .submit-row {
        justify-content: center;
        display: flex;
        width: 100%;
    }
</style>
